<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <!--移动端的预览设置，用于适配移动端-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="/Semantic-UI-CSS-master/semantic.min.css">
    <link rel="stylesheet" href="/css/myblog.css">
    <link rel="icon" href="/images/闪电.ico" sizes="32x32">
    <meta name="baidu-site-verification" content="code-kurjhDlkKs" />
    <title>首页</title>
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?7cd3e5b5274253178c805c4447a51941";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</head>
<script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1279472717'%3E%3C/span%3E%3Cscript src='https://v1.cnzz.com/z_stat.php%3Fid%3D1279472717%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
<body>
    <!--导航-->
    <nav class="ui inverted attached segment m-padded-tb-mini m-shadow-small"
    th:fragment="indexNav">
        <div class="ui container">
            <div class="ui inverted secondary menu stackable">
                <h2 class="ui teal header item">Blog</h2>
                <a href="/index" class="m-item item m-mobile-hide active"><i class="home icon"></i>首页</a>
                <a href="/page_types" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
                <a href="/page_tags" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
                <a href="/archives" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
                <a href="/wechat" class="m-item item m-mobile-hide"><i class="comment icon"></i>微信公众号</a>
                <a href="http://www.lightning99.com" class="m-item item m-mobile-hide"><i class="play icon"></i>lightning视频</a>
                <a href="http://121.196.47.73:7071/index" class="m-item item m-mobile-hide"><i class="heart icon"></i>疫情追踪</a>
                <a href="/about" class="m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
                <div class="m-item right item  m-mobile-hide">
                    <form action="/search" method="get">
                        <div class="ui action input inverted transparent ">
                            <input type="text" name="title" placeholder="search...">
                            <button class="ui icon button" type="submit">
                                <i class="search icon"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div id="weather-v2-plugin-simple"></div>
        <script>
            WIDGET = {
                CONFIG: {
                    "modules": "01234",
                    "background": 1,
                    "tmpColor": "008C8C",
                    "tmpSize": 16,
                    "cityColor": "9013FE",
                    "citySize": 16,
                    "aqiSize": 16,
                    "weatherIconSize": 24,
                    "alertIconSize": 18,
                    "padding": "10px 10px 10px 10px",
                    "shadow": "1",
                    "language": "auto",
                    "borderRadius": 5,
                    "fixed": "false",
                    "vertical": "middle",
                    "horizontal": "center",
                    "key": "iiWeyQJUcW"
                }
            }
        </script>
        <script src="https://apip.weatherdt.com/simple/static/js/weather-simple-common.js?v=2.0"></script>

        <a id="b1" href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </nav>

    <!--中间内容-->
    <div class="m-padded-tb-large m-opacity-mini m-container ">
        <div class="ui container">
            <div class="ui grid stackable ">
                <!----左边博客列表--->
                <div class="eleven wide column ">
                    <!--头部-->
                    <div class="ui segment top attached ">
                        <div class="ui middle aligned grid two column">
                            <div class="column">
                                <h3 class="ui header teal">博客</h3>
                            </div>
                            <div class="column right aligned">
                                共<h2 class="ui orange header m-inline-block mth" th:text="${number}">&nbsp;14&nbsp; </h2>篇
                            </div>
                        </div>
                    </div>
                    <!--列表-->
                    <div class="ui attached segment ">
<!--                        <div th:if="${blogs==null||blogs?.size()==0}"><h2>等待更新哦</h2></div>-->
                        <div th:if="${blogs?.size()==0}"><h2>等待更新哦</h2></div>
                        <div class="ui padded segment vertical m-padded-b-small m-mobile-clear" th:each="blog,iter:${blogs}">
                            <div class="ui grid mobile reversed stackable">
                                <div class="ui eleven wide column">
                                    <a th:href="@{'/page_blog/'+${blog.getId()}}" target="_blank">
                                        <h3 class="ui header" th:text="${blog.getTitle()}" >【一年总结】记我的自学生活</h3>
                                    </a>

                                    <p class="m-text-thin m-text-lined m-text-spaced" th:text="${blog.getSummary()}">学习是终身的</p>
                                    <div class="ui grid">
                                        <div class="eleven wide column">
                                            <div class="ui list horizontal link mini ">
                                                <div class="item">
                                                    <img src="/images/头像.png" class="ui avatar image">
                                                    <div class="content"><a href="#" class="header ">闪电</a></div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon" ></i><span th:text="${#dates.format(blog.getDate(),'yyyy-MM-dd')}">2020-11-04</span>
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i><span th:text="${blog.getViews()}">7777</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="five wide column right aligned ">
                                            <a th:href="@{'/page_types?typeId='+${blog.getType().getId()}}" target="_blank" class="ui label teal basic m-padded-tiny" th:text="${blog.getType().getName()}">一年总结</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="ui five wide column m-padded-tb-large">
                                    <a th:href="@{'/page_blog/'+${blog.getId()}}" target="_blank" >
                                        <img th:src="${blog.getPictureUrl()}" class="ui round image ">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--底部-->
                    <div class="ui bottom attached segment">
                        <div class="ui middle aligned grid two column">
                            <div class="column">
                                <a class="ui button basic mini teal" th:href="@{'/index?begin='+${begin-size}+'&size='+${size}}">上一页</a>
                            </div>
                            <div class="column right aligned">
                                <a class="ui button basic mini teal" th:href="@{'/index?begin='+${begin+size}+'&size='+${size}}">下一页</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!----右边的top--->
                <div class="five wide column">
                    <div class="ui segments">
                        <!--secondary加个灰色的效果-->
                        <!--分类-->
                        <div class="ui secondary segment ">
                            <div class="ui two column grid">
                                <div class="column">
                                    <i class="idea icon"></i>分类
                                </div>
                                <div class="column right aligned">
                                    <a href="/page_types" target="_blank">more<i class="angle double right icon"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="ui teal segment">
                            <div class="ui fluid vertical menu">
                                <a  class="item" th:each="type,iter:${types}" th:href="@{'/page_types?typeId='+${type.getId()}}">
                                    <span th:text="${type.getName()}"></span>
                                    <div class="ui basic teal left pointing label" th:text="${type.getNumber()}">13</div>
                                </a>

                            </div>
                        </div>
                    </div>
                    <!--标签-->
                    <div class="ui segments m-margin-top-large">
                        <div class="ui secondary segment">
                            <div class="ui two column grid" >
                                <div class="column">
                                    <i class="tags icon"></i>标签
                                </div>
                                <div class="column right aligned">
                                    <a href="/page_tags" target="_blank">more<i class="angle double right icon"></i></a>
                                </div>
                            </div>
                        </div>
                        <div class="ui teal segment">
                            <a  target="_blank" class="ui basic teal left pointing label item m-margin-tb-tiny" th:each="tag,iter:${tags}" th:href="@{'/page_tags?tagId='+${tag.getId()}}">
                                <span th:text="${tag.getName()}">一年总结</span> <div class="detail" th:text="${tag.getNumber()}">1</div>
                            </a>
                        </div>
                    </div>
                    <!--最新推荐-->
                    <div class="ui segments m-margin-top-large">
                        <div class="ui secondary segment">
                            <div class="ui two column grid">
                                <div class="column">
                                    <i class="bookmark icon"></i>最新推荐
                                </div>
                            </div>
                        </div>
                        <div class="ui segment " th:each="rblog,iter:${recommendedBlogs}">
                            <a th:href="@{'/page_blog/'+${rblog.getId()}}" target="_blank" class="m-color-black m-text-thin" th:text="${rblog.getTitle()}">【一年总结】记我的自学生活</a>
                        </div>
                    </div>
                    <!--二维码-->
                    <div class="ui horizontal divider header">扫码关注我</div>
                    <div class="ui card centered" style="width: 11em">
                        <img src="/images/CSDN.png" alt="" class="ui rounded image">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>
    <br>
    <!--底部footer-->
   <footer class="ui inverted vertical segment m-opacity-tiny"
   th:fragment="footer">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="two wide column ">
                <h4 class="ui inverted header item m-text-thin m-text-spaced m-opacity-mini" >QQ讨论群</h4>
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="/images/讨论群.png" class="ui rounded image item" style="width: 100px">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">最新博客</h4>
                <div class="ui inverted link list">
                    <a class="item m-text-lined" th:each="newBlog,iter:${newBlogs}" th:href="@{'/page_blog/'+${newBlog.getId()}}" th:text="${newBlog.getTitle()}">博客1</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced ">联系我</h4>
                <div class="ui inverted link list">
                    <p class="item m-text-lined" href="#">QQ:2369381988</p>
                    <p class="item m-text-lined" href="#">email:2369381988@qq.com</p>
                    <a class="item m-text-lined" href="https://blog.csdn.net/m0_46684016?spm=1001.2014.3001.5113">CSDN博客</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">博客简介</h4>
                <p class="m-text-small m-text-thin m-text-spaced m-opacity-mini" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;此博客为潘震的个人博客 Always Believe
                </p>
            </div>
        </div>
        <div class="ui divider "></div>
        <div style="width:300px;margin:0 auto; padding:20px 0;">
            <img src="images/备案图标.png">
            <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42011602000929" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">鄂公网安备 42011602000929号</p></a>
            <p class="m-text-thin m-text-spaced m-opacity-tiny m-text-lined"> <a href="https://beian.miit.gov.cn/">鄂ICP备2020020526号</a> </p>
        </div>
    </div>
   </footer>

<script src="/js/jquery-3.5.1.min.js"></script>
<script src="/Semantic-UI-CSS-master/semantic.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery.pjax/2.0.1/jquery.pjax.min.js"></script>

    <script >
        $("#b1").click(function (){
            $(".m-item").toggleClass("m-mobile-hide");
        });
    </script>
<!--&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
<!--    <img src="/images/微信公众号.jpg" class="jump_img">-->
<!--    <style type="text/css">-->
<!--        .jump_img-->
<!--        {position:absolute;-->
<!--            z-index:99999;-->
<!--            width:400px;-->
<!--            height:200px;-->
<!--            top:50%;-->
<!--            left:42%;-->
<!--            margin:-20% 0 0 -40%;-->
<!--        }-->
<!--    </style>-->
<!--    //根据 宽  高  上   左   来调试图片显示的位置-->
<!--    <script type="text/javascript">-->
<!--        $(document).ready(function() {-->
<!--            //倒计时消失      使用 毫秒值-->
<!--            $(".jump_img").delay(5000).fadeOut();-->
<!--        })-->
<!--    </script>-->

    <!--    <canvas id="snow-flake-app"></canvas>-->
</body>
</html>